<template>
    <a-layout-sider v-model:collapsed="collapsed" collapsible :trigger="null">
        <div class="user t-c">
            <div class="avrtar oh" :class="[collapsed ? 'avatarS' : 'avatarB']">
                <img src="@/assets/imgs/logo.png" alt="头像" class="w100">
            </div>
            <div class="c-w padh10">
                <div>权限等级</div>
                <div class="cp" @click="signOut">注销登录</div>
            </div>
        </div>
        <a-menu id="dddddd" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" theme="dark">
            <template v-for="(m,i) in menus">
                <a-sub-menu :key="m.meta.title" v-if="m.children && m.children.length">
                    <template #icon>
                        <component :is="m.meta.icon"></component>
                    </template>
                    <template #title>{{m.meta.title}}</template>
                    <a-menu-item :key="r.meta.title" v-for="(r,j) in m.children">
                        <router-link :to="r.path">
                            {{r.meta.title}}
                        </router-link>
                    </a-menu-item>
                </a-sub-menu>
            </template>
        </a-menu>
    </a-layout-sider>
</template>
<script setup>
    import { ref, computed } from 'vue';
    import { useStore, mapState } from 'vuex'
    import { useRouter } from 'vue-router'

    const selectedKeys = ref(['1']);
    const openKeys = ref(['sub1']);
    let store = useStore()
    let collapsed = computed(mapState(['collapsed']).collapsed.bind({ $store: store }))
    let menus = store.getters.menus
    let router = useRouter()

    function signOut() {
        router.push('/login')
    }
</script>

<style lang="scss" scoped>
    .user {
        padding: 40px 0 0;
    }

    .avrtar {
        background-color: transparent;
        border: 2px solid white;
        border-radius: 50%;
        margin: 0 auto;

        &.avatarS {
            height: 32px;
            width: 32px;
        }

        &.avatarB {
            height: 80px;
            width: 80px;
        }
    }
</style>